/*
 * Ext JS Library 2.1
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */

//
// This is the main layout definition.
//
Ext.onReady(function(){
  
  Ext.QuickTips.init();
  
  // This is an inner body element within the Details panel created to provide a "slide in" effect
  // on the panel body without affecting the body's box itself.  This element is created on
  // initial use and cached in this var for subsequent access.
  var detailEl;
  
  // This is the main content center region that will contain each example layout panel.
  // It will be implemented as a CardLayout since it will contain multiple panels with
  // only one being visible at any given time.
  var contentPanel = {
    id: 'content-panel',
    region: 'center', // this is what makes this panel into a region within the containing layout
    layout: 'card',
    margins: '2 5 5 0',
    activeItem: 0,
    border: false,
    items: [
      // from basic.js:
      start, absolute, accordion, anchor, border, cardTabs, cardWizard, column, fit, form, table,
      // from custom.js:
      rowLayout, centerLayout,
      // from combination.js:
      absoluteForm, tabsNestedLayouts
    ]
  };
    
  // Go ahead and create the TreePanel now so that we can use it below
    var treePanel = new Ext.tree.TreePanel({
      id: 'tree-panel',
      title: 'Sample Layouts',
        region:'north',
        split: true,
        height: 300,
        minSize: 150,
        autoScroll: true,
        
        // tree-specific configs:
        rootVisible: false,
        lines: false,
        singleExpand: true,
        useArrows: true,
        
        loader: new Ext.tree.TreeLoader({
            requestMethod: 'get',
            dataUrl:'/ext/examples/layout-browser/tree-data.json'
        }),
        
        root: new Ext.tree.AsyncTreeNode()
    });
    
  // Assign the changeLayout function to be called on tree node click.
    treePanel.on('click', function(n){
      var sn = this.selModel.selNode || {}; // selNode is null on initial selection
      if(n.leaf && n.id != sn.id){  // ignore clicks on folders and currently selected node 
        Ext.getCmp('content-panel').layout.setActiveItem(n.id + '-panel');
        if(!detailEl){
          var bd = Ext.getCmp('details-panel').body;
          bd.update('').setStyle('background','#fff');
          detailEl = bd.createChild(); //create default empty div
        }
        detailEl.hide().update(Ext.getDom(n.id+'-details').innerHTML).slideIn('l', {stopFx:true,duration:.2});
      }
    });
    
  // This is the Details panel that contains the description for each example layout.
  var detailsPanel = {
    id: 'details-panel',
        title: 'Details',
        region: 'center',
        bodyStyle: 'padding-bottom:15px;background:#eee;',
    autoScroll: true,
    html: '<p class="details-info">When you select a layout from the tree, additional details will display here.</p>'
    };
  
  // Finally, build the main layout once all the pieces are ready.  This is also a good
  // example of putting together a full-screen BorderLayout within a Viewport.
    new Ext.Viewport({
    layout: 'border',
    title: 'Ext Layout Browser',
    items: [{
      xtype: 'box',
      region: 'north',
      applyTo: 'header',
      height: 30
    },{
      layout: 'border',
        id: 'layout-browser',
          region:'west',
          border: false,
          split:true,
      margins: '2 0 5 5',
          width: 275,
          minSize: 100,
          maxSize: 500,
      items: [treePanel, detailsPanel]
    },
      contentPanel
    ],
        renderTo: Ext.getBody()
    });
});
